<template>
	<div class="singer">
		<!-- 页面标题 start -->
		<div class="singer-title">歌手</div>
		<!-- 页面标题 end -->

		<!-- 歌手分类 start -->
		<div class="singer-classify">
			<el-row>
				<el-col
					:span="4"
					v-for="item of singerClassify"
					:key="item.classid"
				>
					<div
						class="btn"
						:class="{ 'is-active': item.isActive }"
						@click="handleTab(item.classid)"
					>
						{{ item.classname }}
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 歌手分类 end -->

		<!-- 分类下的歌手 start -->
		<el-row class="singers" v-if="singers.length !== 0">
			<el-col
				:xs="4"
				:sm="6"
				:md="6"
				:lg="3"
				v-for="(item, index) of singers"
				:key="item.singerid"
			>
				<div
					class="singer-item"
					@click="targetSingerDetails(item.singerid, item.singername)"
				>
					<div class="singer-img">
						<img :src="item.imgurl" alt="" />
						<div class="fill-screen">
							<i>&#xe627;</i>
						</div>
					</div>
					<div class="singer-name" v-if="index <= 2">
						<em></em>
						<span>{{ item.singername }}</span>
					</div>
					<div class="singer-name" v-else>
						<i>{{ index + 1 }}.</i>
						<span>{{ item.singername }}</span>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 分类下的歌手 end -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 歌手分类
			singerClassify: [],
			singers: [],
		};
	},
	methods: {
		// 获取歌手分类
		getSingerClassify() {
			this.axios.get("/api-singer/singer/class&json=true").then((res) => {
				res.data.list.forEach((item) => {
					item.id = item.classid;
					if (item.classid == 88) {
						item.isActive = true;
					} else {
						item.isActive = false;
					}
				});
				this.singerClassify = res.data.list;
			});
		},
		// 获取歌手的歌曲
		getSingers() {
			this.axios
				.get(`/api-singer//singer/list/88?json=true`)
				.then((res) => {
					res.data.singers.list.info.forEach((item) => {
						item.imgurl = item.imgurl.split("/{size}").join("");
						this.singers.push(item);
					});
				});
		},
		getSingersList(id) {
			this.singers = [];
			this.axios
				.get(`/api-singer/singer/list/${id}?json=true`)
				.then((res) => {
					res.data.singers.list.info.forEach((item) => {
						item.imgurl = item.imgurl.split("/{size}").join("");
						this.singers.push(item);
					});
				});
		},
		// 切换歌手分类
		handleTab(id) {
			this.singerClassify.forEach((item) => {
				if (id == item.id) {
					item.isActive = true;
				} else {
					item.isActive = false;
				}
			});
			this.getSingersList(id);
		},
		// 点击歌手 跳转到对应的歌手详情页
		targetSingerDetails(singerid, singername) {
			sessionStorage.setItem("singerid", singerid);
			sessionStorage.setItem("singername", singername);
			this.$router.push(`/singerDetails/${singerid}`);
		},
	},
	mounted() {
		// 获取歌手分类
		this.getSingerClassify();
		// 获取歌手的歌曲
		this.getSingers();
	},
};
</script>
<style lang="scss">
.singer {
	.singer-title {
		font-size: 25px;
		font-weight: 700;
	}
	// 歌手分类 start
	.singer-classify {
		margin-top: 20px;
		.el-row {
			.el-col {
				margin: 7px 0;
				.btn {
					cursor: pointer;
					width: 90%;
					padding: 15px 0;
					text-align: center;
					font-size: 14px;
					color: #333;
					border-radius: 22px;
					background-color: #f7f7f7;
					&:hover {
						color: #5192fe;
						background-color: #e3e3e3;
					}
					&.is-active {
						color: #fff;
						background-image: linear-gradient(
							to right,
							#83b1fe,
							#5292fe
						);
					}
				}
			}
		}
	}
	// 歌手分类 end

	// 歌手分类下的歌手 start
	.singers {
		margin-top: 30px;
		.el-col {
			.singer-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 230px;
				cursor: pointer;
				.singer-img {
					position: relative;
					width: 80%;
					img {
						width: 100%;
						border-radius: 50%;
					}
					.fill-screen {
						display: none;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border-radius: 50%;
						background-color: rgba(0, 0, 0, 0.4);
						i {
							position: absolute;
							top: calc(50% - 20px);
							left: calc(50% - 20px);
							font-size: 40px;
							font-family: "iconfont";
							color: #fff;
							&:hover {
								color: #5192fe;
							}
						}
					}
					&:hover {
						.fill-screen {
							display: block;
						}
					}
				}
				.singer-name {
					display: flex;
					margin-top: 20px;
					font-size: 14px;
					i {
						color: #858585;
					}
					span {
						color: #333;
					}
					&:hover {
						i {
							color: #5192fe;
						}
						span {
							color: #5192fe;
						}
					}
					em {
						display: inline-block;
						width: 24px;
						height: 24px;
						margin-right: 5px;
						line-height: 20px;
						text-align: center;
						color: #fff;
						font-size: 12px;
						background: url("../assets/img/singer-first.svg")
							no-repeat;
						background-size: contain;
						transform: translateY(-6px);
					}
				}
			}

			&:nth-child(2) {
				.singer-name {
					em {
						background-image: url("../assets/img/singer-second.svg");
					}
				}
			}
			&:nth-child(3) {
				.singer-name {
					em {
						background-image: url("../assets/img/singer-third.svg");
					}
				}
			}
		}
	}
	// 歌手分类下的歌手 end
}
</style>
